<template>
  <div class="login">
    <div class="login-box">
      <div class="label">Backstage Management</div>
      <el-form :model="form" style="width: 300px" ref="loginRef" :rules="rules">
        <el-form-item prop="identifier">
          <el-input v-model="form.identifier" placeholder="用户名" :prefix-icon="User" />
        </el-form-item>
        <el-form-item prop="certificate">
          <el-input v-model="form.certificate" placeholder="密码" :prefix-icon="Lock" type="password" show-password />
        </el-form-item>
        <el-form-item prop="code">
          <el-input v-model="form.code" placeholder="安全码" :prefix-icon="Lock" type="password" show-password />
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%" type="primary" @click="submitForm(loginRef)">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { Lock, User } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { login } from "@/apis/admin";
import { ElMessage } from "element-plus";
const router = useRouter();
const loginRef = ref(null);
const rules = reactive({
  identifier: [
    {
      required: true,
      message: "请输入用户名",
      trigger: "blur",
    },
  ],
  certificate: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
  ],
  code: [
    {
      required: true,
      message: "请输入安全码",
      trigger: "blur",
    },
  ],
});
const form = ref({
  identifier: "",
  certificate: "",
  code: ""
});
const is_loading = ref(false);
const submitForm = async (formEl) => {
  if (!formEl) return;
  if (is_loading.value) return;
  is_loading.value = true;
  await formEl.validate((valid, fields) => {
    if (valid) {
      login
        .post("", form.value)
        .then((res) => {
          is_loading.value = false;
          if (res.code == "200") {
            localStorage.setItem("token", res.data.accessToken);
            router.push({
              path: "/",
            });
          } else {
            ElMessage({
              message: res.msg,
              type: "error",
            });
          }
        })
        .catch(() => {
          ElMessage({
            message: "服务器异常",
            type: "error",
          });
        });
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100vh;
  background-image: url("../assets/images/login-back.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;

  .login-box {
    box-sizing: border-box;
    padding: 30px 20px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .label {
      width: 100%;
      box-sizing: border-box;
      padding-bottom: 15px;
      display: flex;
      justify-content: center;
      color: #fff;
      font-size: 25px;
      font-weight: bold;
    }
  }
}
</style>
